<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">分公司列表</p>
        </div>
        <div class="view-container">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        class="btn-success"
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="organizationAdd()"
                        v-hasPermi="['system:sysOrg:add']"
                    >新建</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="organizationList" @row-click="handleView" border>
                <el-table-column label="序号" type="index" align="center" width="50" />
                <el-table-column label="编码"  align="center" prop="code" :show-overflow-tooltip="true" width="50" />
                <el-table-column label="公司名称" align="center" prop="orgName" :show-overflow-tooltip="true" width="230" />
                <el-table-column label="组织机构代码" align="center" prop="orgCode" :show-overflow-tooltip="true" width="200" />
                <el-table-column label="机构类型" align="center" prop="type" :show-overflow-tooltip="true" width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 1">公司</div>
                        <div v-if="scope.row.type == 2">生产企业</div>
                    </template>
                </el-table-column>
                <el-table-column label="法人" align="center" prop="leader" :show-overflow-tooltip="true" />
                <el-table-column label="联系电话" align="center" prop="leaderPhone" :show-overflow-tooltip="true" />
                <el-table-column label="管理员账号" align="center" prop="userName" :show-overflow-tooltip="true" width="100" />
                <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
                <el-table-column label="状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0" style="color:#52C41A">正常</div>
                        <div v-if="scope.row.status == 1" style="color:#fd562c">禁用</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" align="center" width="100px;" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.status == '1'"
                            class="btn-enable width80"
                            type="primary"
                            size="mini"
                            @click.native.stop="handleEnable(scope.row)"
                            v-hasPermi="['system:sysOrg:enable']"
                        >启用</el-button>
                        <el-button
                            v-else
                            class="btn-delete width80"
                            type="primary"
                            size="mini"
                            @click.native.stop="handleEnable(scope.row)"
                            v-hasPermi="['system:sysOrg:enable']"
                        >禁用</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
    </div>
</template>

<script>
import { organizationList, organizationEnable } from "@/api/system/organization/organization"
export default {
    name: "organizationList",
    data() {
        return {
            loading: true,
            organizationList: [],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表
        getList() {
            this.loading = true
            organizationList().then(res => {
                this.organizationList = res.rows
                this.loading = false
            })
        },
        // 新建
        organizationAdd(){
            this.$router.push({path:"/setting/organization/add"})
        },
        // 查看
        handleView(row) {
            this.$router.push({path:"/setting/organization/detail",query:{id: row.id}})
        },
        // 启用/禁用
        handleEnable(row){
            console.log(row)
            let {id, deptId, status} = row
            if(status == '0'){
                this.$modal.confirm('是否确认禁用？', '禁用').then(() => {
                    organizationEnable(id, deptId, 1).then(res => {
                    if(res.code == 200){
                        this.$modal.msgSuccess("禁用成功")
                        this.getList()
                    }
                    })
                }).catch(() => {})
            }else{
                this.$modal.confirm('是否确认启用？', '启用').then(() => {
                    organizationEnable(id, deptId, 0).then(res => {
                    if(res.code == 200){
                        this.$modal.msgSuccess("启用成功")
                        this.getList()
                    }
                    })
                }).catch(() => {})
            }
        }
    }
}
</script>